<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="UTF-8">
<title>CSS属性练习</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<style type="text/css">
body, div {
	padding: 10px
}

div {
	border: 1px solid #777;
}

body>div:nth-child(1) {
	float: left;
	height:100%;
	overflow:auto;
	width: 35%
}

body>div:nth-child(2) {
	float: right;
	height:100%;
	overflow:auto;
	width: 60%
}
li{
	padding: 2px
}
li:hover{
	background-color: #888;
	color: #fff;
}
li>*:nth-child(2),li>*:nth-child(3){
	float: right;
}
li>span{
	width:60%;
}
li>input{
	width:30%
}
h1{
	background-color: #eee
}
/*这里开始是题目*/
#d1>div{
	width:50px;
	height:50px;
	line-height:50px;
	background: red;
}
#d1>div:nth-child(4){
	background: green;
}
#d1>span{
	background: #0f0;
}
</style>
</head>
<body style="height: 90%">
	<div>
		<h1>display属性</h1>
		<div id="d1">
			<img id="dog" width="50px" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4064772699,1305669735&fm=26&gp=0.jpg"> <span id="span">别找了, SPAN在这里</span> <img id="cat" width="50px"
				src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2897893588,1955083775&fm=26&gp=0.jpg">
			<div id="rd">红方块</div>
			<hr>
			<h3>关于 display 你必须造的</h3>
			<p>
				<strong>1. 块级元素(display: block)</strong><br> 1.1. 独占一行<br> 1.2. 高度、宽度、行高、顶和底边距 可设置<br> 1.3. 默认宽度 父容器100%
			</p>
			<p>
				<strong>2. 内联元素(display: inline)</strong><br> 2.1 和其他元素同一行<br> 2.2 高度、宽度、顶和底边距 不可设置<br> 2.3 宽度是其包含的文字和图片的宽度，不可改变
			</p>
			<p>
				<strong>3. 内联块状元素(display: inline-block)</strong><br> 3.1 和其他元素同一行<br> 3.2 高度、宽度、行高、顶和底边距 可设置
			</p>
			<p>
				<strong>4. absolute和float可改变display</strong><br> position:absolute、float:left 或 float:right 会使元素变为 display: inline-bolck 显示<br> 元素 默认宽度 不占满 父元素<br> 可设置 width 和 height
			</p>
		</div>
	</div>
	<div id="lx">
		<h2>请按照要求完成对左边指定元素的样式进行修改</h2>
		<ol>
			<li v-for="(q,index) in qlist">
				<span>{{q.name}}</span>:
				<img v-bind:style="q" src="OK.png" width="20px" >
				<input v-bind:answer="q.answer" placeholder="请填写样式，例：color:green"
					v-on:click="a(q)"
					v-on:change="answer(q)"
					v-bind:value="q.answer"
					>
			</li>
		</ol>
	</div>

	<script type="text/javascript">
		function Q(name, answer, selector, msg) {
			this.name = name;
			this.answer = answer;
			this.selector = selector;
			this.msg = msg;
			this.visibility = 'visible';
		}
		function q(name, answer, selector, msg) {
			return new Q(name, answer, selector, msg);
		}
		var qlist = [
			q('修改二哈图片的宽度为70px', 'width:70px', '#dog'),
			q('修改萌喵图片的高度为70px', 'height:70px', '#cat', "思考下为什么萌喵会变形?"),
			q('修改 SPAN 的高度为50px', 'height:50px', '#span',"燃鹅, 并没什么X用...别急 to be continue!"),
			q('修改 SPAN 的display属性为 inline-block', 'display:inline-block', '#span',"哈哈, 高度变了吧!"),
			q('修改 SPAN 的display属性为 block', 'display:block', '#span',"看, SPAN变块级元素了"),
			q('修改 SPAN 的display属性为 list-item', 'display:list-item', '#span',"看, SPAN 变成 li 元素式样了"),
			q('修改 SPAN 的display属性为 table', 'display:table', '#span',"看, SPAN 变成 table 元素式样了"),
			q('修改 SPAN 的display属性为 none', 'display:none', '#span',"看, SPAN 消失了"),
			q('修改 SPAN 的display属性为 inline', 'display:inline', '#span',"又变回行级元素了"),
			q('修改 SPAN 的visibility属性为 hidden', 'visibility:hidden', '#span',"visibility也能让元素消失, 但是...你自己看看区别吧"),
			q('修改 SPAN 的visibility属性为 visible', 'visibility:visible', '#span',"SPAN元神归位!!!!"),

			q('修改 红方块 设置为行级元素', 'display:inline', '#rd'),
			q('修改 红方块 设置为行内块级元素', 'display:inline-block', '#rd'),
			q('修改 红方块 设置为li元素式样', 'display:list-item', '#rd'),
			q('修改 红方块 设置为table元素式样', 'display:table', '#rd'),
			q('修改 红方块 , 让其隐藏, 但是仍然占据空间', 'visibility:hidden', '#rd'),
			q('修改 红方块 , 让其显示出来', 'visibility:visible', '#rd'),
			q('修改 红方块 , 让其完全消失', 'display:none', '#rd'),
			q('修改 红方块 , 让其还原成功块级元素', 'display:block', '#rd'),

			q('让二哈和萌喵来个零距离接触', 'display:none', '#span'),
			q('让萌喵位于二哈的正下方(SPAN占据整行)', 'display:block', '#span'),
			q('二哈说: 我想跟萌喵在同一行(SPAN变回行级元素)', 'display:inline', '#span'),
			q('二哈说: SPAN挡住了我, 我想远远的看着萌喵', 'visibility:hidden', '#span'),
			q('萌喵说: 还是用SPAN拦着二哈吧,我有安全感', 'visibility:visible', '#span'),
			q('红方块紧跟萌喵的后面', 'display:inline', '#rd'),
			q('二哈穿上魔法斗篷进入隐形模式', 'visibility:hidden', '#dog'),
			q('萌喵进入平行宇宙,消失不见', 'display:none', '#cat'),
			];
		//qlist.sort((a,b)=>{return Math.random()>.5 ? -1 : 1});

		var lx = new Vue({
			el : '#lx',
			data : {
				qlist : qlist,
			},
			methods : {
				answer : function(q) {
					if (event.srcElement.value) {
						var a1 = event.srcElement.value;
						var a2 = q.answer;
						var arr = a1.split(":");
						$(q.selector).css(arr[0], arr[1]);
						a1 = a1.replace(/\s+/g, '');
						a2 = a2.replace(/\s+/g, '');
						a1 = a1.toLowerCase();
						a2 = a2.toLowerCase();
						q.visibility = a1 == a2 ? 'visible' : 'hidden';
						if (a1 == a2 && q.msg) {
							alert(q.msg);
						}
					}
				},
				a : function(q) {
					if (event.altKey) {
						event.srcElement.value = q.answer;
						this.$options.methods.answer(q);
					}
				}
			}
		})
	</script>
</body>
</html>
